<template>
  <div class="view-container">
    <div class="wrapper">
      <div class="Logo-Title">WMS解决方案</div>
      <span class="Logo-sub">实现仓库可视化&数字化&智能化管理</span>
    </div>
    <div class="wrapper-white">
      <div class="top-Title">产品概述</div>
      <span class="top-sub"
        >数智纺WMS系统是面向于纺织制造业的智能<br />仓储管理系统，可有效应对复杂的物料管理以及仓库业<br />务，实现智能仓储管理模式。</span
      >
      <div class="top-image">
        <div class="top-image1">
          <van-image
            width="100%"
            height="100%"
            fit="cover"
            src="https://oss.cloudcpc.com/a11cdc19248b3726b583c028708d8f2e.png"
          />
        </div>
        <div class="top-image2">
          <van-image
            width="100%"
            height="100%"
            fit="cover"
            src="https://oss.cloudcpc.com/25ff7f3f470132718234981aff298fef.png"
          />
        </div>
        <div class="top-image3">
          <van-image
            width="100%"
            height="100%"
            fit="cover"
            src="https://oss.cloudcpc.com/4a5307092f6534738980d5e305455167.png"
          />
        </div>
        <div class="top-image4">
          <van-image
            width="100%"
            height="100%"
            fit="cover"
            src="https://oss.cloudcpc.com/6b5e7ce4683f31408b17a9c18aa9f548.png"
          />
        </div>
        <div class="top-image5">
          <van-image
            width="100%"
            height="100%"
            fit="cover"
            src="https://oss.cloudcpc.com/6b5e7ce4683f31408b17a9c18aa9f548.png"
          />
        </div>
        <div class="top-image6">
          <van-image
            width="100%"
            height="100%"
            fit="cover"
            src="https://oss.cloudcpc.com/4a5307092f6534738980d5e305455167.png"
          />
        </div>
        <div class="top-image7">
          <van-image
            width="100%"
            height="100%"
            fit="cover"
            src="https://oss.cloudcpc.com/e75a1b23c81e3dba8ef9ff0624ab0b07.png"
          />
        </div>
        <div class="top-image8">
          <van-image
            width="100%"
            height="100%"
            fit="cover"
            src="https://oss.cloudcpc.com/47322f959e36327b8e06ac1920f6ea2e.png"
          />
        </div>
        <div class="top-image9">
          <van-image
            width="100%"
            height="100%"
            fit="cover"
            src="https://oss.cloudcpc.com/6dab9c672e23389c887aba716f328a30.png"
          />
        </div>
        <!-- <van-image width="100%" height="100%" fit="cover"
      src="https://oss.cloudcpc.com/aaa9aa5b65b133d29031fbb716455017.png" /> -->
      </div>
    </div>
    <div class="sys-white">
      <div class="top-Title">系统核心</div>
      <span class="top-sub sys-sub"
        >基于工业互联时代研发的仓储精细化管理软件，支持多<br />仓库、多货主，多业务模式，可配置的灵活策略<br />和流程增值服务，支持人找货、货到人等作业模式，<br />可实现物动账动，全程可视化管理。</span
      >
      <!-- //scroll-view scroll-x="true"  -->
      <div style="width: 100%; overflow-x: auto">
        <div class="sys-view-item">
          <van-image
            width="100%"
            height="100%"
            fit="cover"
            src="https://oss.cloudcpc.com/7544c879885e3da2873768bf2c7d4eec.png"
          />
        </div>
      </div>
    </div>
    <div class="sys-down-wrapper">
        <div class="sys-down-image">
      <span class="top-sub sys-sub"
        >系统实现由人工化、机械化仓储向自动化和智能化<br />升级，实现完善的企业仓储信息管理。<br />附加云仓储精细化能力和数据服务能力，是企业在仓储<br />作业过程中解决种种挑战的利器。</span
      >
      <div class="sys-list">
        <div class="sys-img1 wow fadeInRight" data-wow-duration="0.4s" data-wow-delay="0.3s">
          <van-image
            width="100%"
            height="100%"
            fit="cover"
            src="https://oss.cloudcpc.com/233e3358110e315281e5aeb5eb3fe3a7.png"
          />
        </div>
        <div class="sys-img2 wow fadeInRight" data-wow-duration="0.4s" data-wow-delay="0.6s">
          <van-image
            width="100%"
            height="100%"
            fit="cover"
            src="https://oss.cloudcpc.com/7c159604eff33f0dbd6beb91c2e2ac21.png"
          />
        </div>
        <div class="sys-img3 wow fadeInRight" data-wow-duration="0.4s" data-wow-delay="0.9s">
          <van-image
            width="100%"
            height="100%"
            fit="cover"
            src="https://oss.cloudcpc.com/83e716d3ccc6334cbb1a2c76d8980444.png"
          />
        </div>
        
      </div>
    </div>
    <div class="basic-white">
      <div class="top-Title">基本功能与架构</div>
      <div class="basic-img">
        <van-image
          width="100%"
          height="100%"
          fit="cover"
          src="https://oss.cloudcpc.com/cc4a138e921136de965ad84dd987ba83.png"
        />
      </div>
      <!-- scroll-view scroll-x="true" -->
      <div style="width: 100%; overflow-x: auto">
        <div class="basic-view-item">
          <van-image
            width="100%"
            height="100%"
            fit="cover"
            src="https://oss.cloudcpc.com/0134c7be0aa4340b96cbbd3b3545701d.png"
          />
        </div>
      </div>
    </div>
    <div class="value-white">
      <div class="top-Title">产品价值</div>
      <span class="top-sub value-sub"
        >WMS是一款标准化、智能化过程导向管理的仓库管理软件，使用后，仓库管理模式发生了彻底的转变：从传统的结果导向转变成过程导向；从数据录入转变成数据采集，同时兼容原有的数据录入方式；从人工找货转变成导向定位取货；引入了监控平台，让管理更加高效、快捷。</span
      >
      <div class="value-list">
        <div v-for="(item, index) in listArr" :key="index" class="wow fadeInUp">
          <div class="value-white-view">
            <div class="value-image">
              <van-image width="100%" height="100%" fit="cover" :src="item.url" />
            </div>
            <span class="value-thite-sub">{{ item.sub }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
</template>

<script>
import { WxShare } from '@/utils/share'
import { redirectUrl } from '@/utils/config'
import { WOW } from 'wowjs'

export default {
  data() {
    return {
      listArr: [
        {
          url: 'https://oss.cloudcpc.com/c5cffae56ce7353ea8dfd344e7529d45.png',
          sub: '数据采集及时、过程精准管理、全自动化智能导向，提高工作效率'
        },
        {
          url: 'https://oss.cloudcpc.com/650a8767eba532349af4914540dcec4a.png',
          sub: '库位精确定位管理、状态全面监控，充分利用有限仓库空间'
        },
        {
          url: 'https://oss.cloudcpc.com/dce86c2c7d0131dfa24cb2963312aa5a.png',
          sub: '货品上架和下架，全智能按先进先出自动分配上下架库位，避免人为错误'
        },
        {
          url: 'https://oss.cloudcpc.com/5a91874546a63f0c87a61d7aa8be3381.png',
          sub: '实时掌控库存情况，合理保持和控制企业库存'
        },
        {
          url: 'https://oss.cloudcpc.com/24eb167a2a143b0498a39315493d2a5a.png',
          sub: '通过对批次信息的自动采集，实现了对产品生产或销售过程的可追溯性'
        },
        {
          url: 'https://oss.cloudcpc.com/fba5d6e819803c52adf7283da66d6547.png',
          sub: '条码管理促进公司管理模式的转变，依靠精确的数字分析管理，提升供应链响应速度，增强公司的整体竞争力'
        }
      ]
    }
  },
  mounted() {
    const { fullPath } = this.$route

    this.$nextTick(() => {
      let wow = new WOW({
        boxClass: 'wow', /// 动画元件css类（默认为wow）
        animateClass: 'animated', // 动画css类（默认为animated）
        offset: 0, // 到元素距离触发动画（当默认为0）
        mobile: true, // 在移动设备上触发动画（默认为true）
        live: true // 对异步加载的内容进行操作（默认为true）
      })
      // wow.start()
      wow.init()
    })
    // WxShare({
    //   title: '云上展',
    //   desc: '数字展馆一站式服务，文化、品牌、科技、展示、互动、营销多位一体，量身定制虚拟数字解决方案！',
    //   link: `${redirectUrl}${fullPath}`,
    //   imgUrl: 'https://www.2025.net/share.png'
    // })
  },

  methods: {}
}
</script>
<style lang="scss" scoped>
@import './index';
</style>
